<template>
  <div class="content">
    <div class="content_image">
      <div class="image1 ">
        <el-image class="img" :src="imageUrl5" />
        <p class="font">
          <span>{{ topbar.todayOrdersNumber }}</span><span>/单</span>
        </p>
        <p class="num">今日订单数量</p>
      </div>
      <div class="image1">
        <el-image class="img" :src="imageUrl1" />
        <p class="font">
          <span>{{ topbar.todayRelationNumber }}</span><span>/人</span>
        </p>
        <p class="num">今日新增用户数量</p>
      </div>
      <div class="image1">
        <el-image class="img" :src="imageUrl2" />
        <p class="font">
          <span>{{ topbar.accompanyNumber }}</span><span>/人</span>
        </p>
        <p class="num">陪诊总数</p>
      </div>
      <div class="image1">
        <el-image class="img" :src="imageUrl3" />
        <p class="font">
          <span>{{ topbar.relationNumber }}</span><span>/人</span>
        </p>
        <p class="num">用户总数</p>
      </div>
      <div class="image1">
        <el-image class="img" :src="imageUrl4" />
        <p class="font">
          <span>{{ topbar.orderNumber }}</span><span>/单</span>
        </p>
        <p class="num">订单总数</p>
      </div>
    </div>
    <div class="content_linechart box d-jc-sb">
      <div class="class-number">
        <div class="title">年龄分布统计</div>
        <div id="myChart1" style="width: 100%;height: 90%" />
      </div>

      <div class="linechart">
        <div class="title">用户来源分布</div>
        <div id="myChart2" style="width: 100%;height: 100%" />
      </div>
      <div class="inform">
        <div class="title">用户订单排行榜</div>
        <div id="myChart3" style="width: 100%;height: 100%" />


      </div>

    </div>
    <div class="box d-jc-sb">
      <div class="class-sign">
        <div class="title">医院订单排行</div>
        <div id="myChart4" style="width: 100%;height: 90%" />

      </div>

      <div class="class-time">
        <div class="title">今日生日用户</div>
        <el-table
          :data="birthdayList"
          style="width: 100%"
          height="350"
        >
          <el-table-column
            align="center"
            prop="name"
            label="用户姓名"
            width="100"
          />
          <el-table-column
            align="center"
            prop="phone"
            label="联系电话"
            width="200"
          />

          <el-table-column
            align="center"
            prop="sex"
            label="性别"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.sex===1?'男':'女' }}
              </div>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="age"
            label="年龄"
          >

          </el-table-column>
          <el-table-column
            align="center"
            prop="idCard"
            label="证件号"
            width="250"
          >

          </el-table-column>

        </el-table>

      </div>

    </div>
  </div>

</template>

<script>
import {
  ageStatistics,
  birthdayToday,
  hospitalOrderRanking,
  relationOrderRanking,
  relationSource,
  variousData
} from "@/api";

export default {
  name: 'Schedule',
  data() {
    return {
      imageUrl1: require('../../../assets/main_images/red@2x.png'),
      imageUrl2: require('../../../assets/main_images/yellow@2x.png'),
      imageUrl3: require('../../../assets/main_images/green@2x.png'),
      imageUrl4: require('../../../assets/main_images/blue@2x.png'),
      imageUrl5: require('../../../assets/main_images/purple@2x.png'),
      active: 1,
      tableData: '',
      topbar: '',
      classsize: '',
      getclassNum: [],
      weekSign: '',
      attendanceRate: '',
      getRateInfo: [],
      checktime: '',
      age:'',
      birthdayList:[]
    }
  },
  mounted() {
    this.variousData()
    this.ageStatistics()
    this.relationSource()
    this.relationOrderRanking()
    this.hospitalOrderRanking()
    this.birthdayToday()


  },
  created() {

  },
  methods: {
    //获取顶部数据
    variousData(){
      variousData().then(res =>{
        this.topbar = res.dataMap

      })
    },
    //年龄分布
    ageStatistics(){
      ageStatistics().then(res =>{
        this.chart1(res.dataMap)
      })
    },
    //用户来源
    relationSource(){
      relationSource().then(res =>{
        this.chart2(res.dataMap)

      })
    },

    //用户排行榜
    relationOrderRanking(){
      relationOrderRanking().then(res =>{
        this.chart3(res.dataMap)
      })
    },
    //医院排行榜
    hospitalOrderRanking(){
      hospitalOrderRanking().then(res =>{
        this.chart4(res.dataMap)
      })

    },
    //今日生日数据
    birthdayToday(){
      birthdayToday().then(res =>{
        this.birthdayList = res.dataMap

      })
    },
    chart1(data) {
      const chartDom = document.getElementById('myChart1')
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    chart2(data) {
      var chartDom = document.getElementById('myChart2');
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:data

          }
        ]
      };
      option && myChart.setOption(option);
    },
    chart3(data) {
      var chartDom = document.getElementById('myChart3')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        yAxis: {
          type: 'category',
          data:data.name
        },
        xAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.orderTotal,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option)
    },
    chart4(data) {
      var chartDom = document.getElementById('myChart4')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        yAxis: {
          type: 'category',
          data: data.name
        },
        xAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.orderTotal,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option)
    }

  }
}
</script>

<style scoped lang="scss">
*{
  padding: 0;
  margin: 10px 0;
}
.active{
  background-color: #739EFF !important;
  color: #fff !important;

}
.date-div{
}
.date{
  width: 60px;
  height: 32px;
  background-color: #fff;
  text-align: center;
  line-height: 32px;
  border-top: solid 2px #739EFF;
  border-bottom: solid 2px #739EFF;
  border-left: solid 2px #739EFF;
  color: #739EFF;
  margin-top: 20px;
}
.time_tag{
  margin: 10px;
  padding: 1px 5px;
}
.left{
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;

}
.right{
  border-right: solid 2px #739EFF;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  margin-right: 20px;
}
.content{
  width: 95%;
  height: 90%;
  margin: 0 auto;
}
.content_image{
  height: 136px;
  /*border:1px solid red;*/
  display: flex;
  justify-content: space-between;
}
.image1{
  width: 316px;
  height: 136px;
  position: relative;
  .img{
    width: 316px;
    height: 136px;
  }
}
.font{
  position: absolute;
  left: 30px;
  top: 29px;
}
.font>span:nth-child(1){
  font-size: 30px;
  font-weight: bold;
  color: #FFFFFF;
}
.font>span:nth-child(2){
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
}
.num{
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  position: absolute;
  left: 30px;
  top: 65px;
}
.class-number{
  width: 35%;
  height: 450px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px 10px;

}
.class-sign{
  width: 49%;
  height: 420px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px 10px;
}

.class-time{
  width: 49%;
  height: 420px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px 20px;
  .title{
    font-weight: bold;
    color: #4c4c4c;
  }
}
.inform{
  width: 28%;
  height: 450px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px 10px;

}
.linechart{
  width: 35%;
  height: 450px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px 10px;
}
</style>
